<template>
	<view class="py-18 px-18 flex-row items-center justify-between rounded-sm" :class="[props._class]" :style="[_style]">
		<view class="flex-row items-center">
			<view v-if="props.prefixType === 'circle'" class="w-24 h-24 rounded-full mr-18"
				:style="[_prefixStyle, props._prefixStyle]"></view>
			<view v-if="props.prefixType === 'line'" class="w-10 h-30 rounded mr-18"
				:style="[_prefixStyle, props._prefixStyle]"></view>
			<view v-if="props.prefixType === 'square'" class="w-30 h-30 rounded-xs mr-18"
				:style="[_prefixStyle, props._prefixStyle]"></view>
			<ac-text :label="props.title" :font-size="titleFontSize" />
		</view>
		<view>
			<slot name="right" />
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const props = defineProps({
	...pub_props,
	bg: {
		type: String,
		default: '',
	},
	linear: {
		type: Boolean,
		default: false,
	},
	title: {
		type: String,
	},
	titleFontSize: {
		type: Number,
	},
	titleColor: {
		type: String,
	},
	subTitle: {
		type: String,
	},
	subTitleFontSize: {
		type: String,
	},
	subTitleColor: {
		type: String,
	},
	// 	装饰类型，可选值：line（竖线）、circle（圆形）、square（方形）
	prefixType: {
		type: String,
		default: 'line',
	},
	prefixColor: {
		type: String,
		default: 'blue-500',
	},
	_class: {
		type: String,
		default: '',
	},
	_style: {
		type: String,
		default: '',
	},
});

const _style = computed(() => {
	let style = {};

	if (props.bg && !props.linear) {
		style['background-color'] = computedColor(props.bg, props.linear ? 'linear' : '', props.theme);
	}
	if (props.bg && props.linear) {
		style['background-image'] = computedColor(props.bg, props.linear ? 'linear' : '', props.theme);
	}
	return style;
});

const _prefixStyle = computed(() => {
	let style = {};

	if (props.prefixColor && !props.linear) {
		style['background-color'] = computedColor(props.prefixColor, props.linear ? 'linear' : '', props.theme);
	}
	if (props.prefixColor && props.linear) {
		style['background-image'] = computedColor(props.prefixColor, props.linear ? 'linear' : '', props.theme);
	}
	return style;
});
</script>

<style scoped></style>
